<template>
  <div>
    <div class="header">
      <el-select v-model="courseid" clearable placeholder="全部科目" style="margin-left: 20px;" @clear="empty">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
          @click.native="groupNameChange(coursename)">
        </el-option>
      </el-select>
      <UserAcatar @transfer="change" />
    </div>

    <div class="mydiv">

      <div class="menu">
        <el-menu :default-active="status" class="mymenu" mode="horizontal" @select="handleSelect"
          active-text-color="#FDCB9E">
          <el-menu-item index="unpublished" style="background-color: white;">
            <span style="font-weight: bold;">未提交</span>
          </el-menu-item>
          <el-menu-item index="unreviewed" style="background-color: white;">
            <span style="font-weight: bold;">待批阅</span>
          </el-menu-item>
          <el-menu-item index="review" style="background-color: white;">
            <span style="font-weight: bold;">已批阅</span>
          </el-menu-item>
          <el-menu-item index="unaccomplish" style="background-color: white;">
            <span style="font-weight: bold;">未完成</span>
          </el-menu-item>
        </el-menu>
      </div>

      <div v-if="workList.length == 0"
        style="height: 300px; width: 400px; color: #ccc;display: flex;align-items: center;justify-content: center;"
        v-loading="loading">
        暂无数据
      </div>
      <div v-else style="min-height: 300px; min-width: 600px;" v-loading="loading">
        <div v-for="item in workList" :key="item.assignment_id">
          <!-- 未提交 -->
          <el-card v-if="submit_status == 'unpublish'" style="width: 800px; margin: 5px 0;padding:  0 15px;">
            <div style="display: flex;align-items: center;justify-content: space-between;">
              <span style="font-size: large;font-weight: bold;display: flex;align-items: center;">
                {{ item.grade_name }}-{{ item.course_name }}
                <el-tag :type="isshorter(item.deadline)" size="small" style="margin-left: 20px;">距离截止：{{
                  deadlineTime(item.deadline) }}</el-tag>
              </span>
              <span style="color: #FDCB9E;font-size: 18px;">{{ item.total_points }}分</span>
            </div>

            <div style="display: flex;align-items: center;justify-content: space-between;">
              <el-popover placement="bottom" width="360" trigger="hover" :content="item.assignment_title">
                <span slot="reference" class="workname"
                  style="display: inline-block; width: 360px;overFlow: hidden;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;font-size: 16px;font-weight: bold;"
                  @click="assginmentDecs(item.assignment_id, item.student_assignment_id, item.course_id, 'unpublished')">
                  <i class="el-icon-bell"></i> {{ item.assignment_title }}
                </span>
              </el-popover>
              <el-tooltip content="写作业" placement="bottom" effect="light">
                <el-button type="success" size="small" icon="el-icon-edit" @click="goWork(item)"></el-button>
              </el-tooltip>
            </div>
          </el-card>

          <!-- 待批阅 -->
          <el-card v-if="submit_status == 'published' && correction_status == 'false'"
            style="width: 800px; margin: 5px 0;padding: 0 15px;">

            <div style="display: flex;align-items: center;justify-content: space-between;">
              <span style="font-size: large;font-weight: bold;display: flex;align-items: center;">
                {{ item.grade_name }}-{{ item.course_name }}
                <el-tag effect="plain" type="warning" size="small" style="margin-left: 20px;">待验收</el-tag>
                <el-tag effect="plain" type="danger" size="small" v-if="item.isdeadline"
                  style="margin-left: 20px;">已截止</el-tag>
              </span>
              <span style="color: #FDCB9E;font-size: 18px;">{{ item.total_points }}分</span>
            </div>

            <div style="display: flex;align-items: center;justify-content: space-between;">
              <el-popover placement="top-start" width="360" trigger="hover" :content="item.assignment_title">
                <span slot="reference" class="workname"
                  style="display: inline-block; width: 360px;overFlow: hidden;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;font-size: 16px;font-weight: bold;"
                  @click="assginmentDecs(item.assignment_id, item.student_assignment_id, item.course_id, 'published')">
                  {{ item.assignment_title }}
                </span>
              </el-popover>

              <div class="btn">
                <el-tooltip content="查看" placement="bottom" effect="light">
                  <el-button type="primary" size="small" icon="el-icon-view"
                    style="background-color: #FDCB9E;border: none;"
                    @click="lookWork(item.assignment_id, item.student_assignment_id, 'unreviewed')"></el-button>
                </el-tooltip>
                <el-tooltip v-if="!item.isdeadline" content="修改" placement="bottom" effect="light">
                  <el-button type="success" size="small" icon="el-icon-edit" @click="editAssignment(item)"></el-button>
                </el-tooltip>
              </div>
            </div>
          </el-card>

          <!-- 已批阅 -->
          <el-card v-if="submit_status == 'published' && correction_status == 'true'"
            style="width: 800px; margin: 5px 0;padding: 0 15px;">
            <div style="display: flex;align-items: center;justify-content: space-between;">
              <span style="font-size: large;font-weight: bold;display: flex;align-items: center;">
                {{ item.grade_name }}-{{ item.course_name }}
              </span>
              <span style="color: #FDCB9E;font-size: 18px;">{{ item.total_points }}分</span>
            </div>

            <div style="display: flex;align-items: center;justify-content: space-between;">
              <el-popover placement="top-start" width="360" trigger="hover" :content="item.assignment_title">
                <span slot="reference" class="workname"
                  style="display: inline-block; width: 360px;overFlow: hidden;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;font-size: 16px;font-weight: bold;"
                  @click="assginmentDecs(item.assignment_id, item.student_assignment_id, item.course_id, 'published')">
                  <i class="el-icon-bell"></i> {{ item.assignment_title }}
                </span>
              </el-popover>
              <el-tooltip content="查看" placement="bottom" effect="light">
                <el-button type="primary" size="small" icon="el-icon-view" style="background-color: #FDCB9E;border: none;"
                  @click="lookWork(item.assignment_id, item.student_assignment_id, 'review')"></el-button>
              </el-tooltip>
            </div>
          </el-card>

          <!-- 未提交 -->
          <el-card v-if="submit_status == 'unaccomplish' && correction_status == 'false'"
            style="width: 800px; margin: 5px 0;padding: 0 15px;">

            <div style="display: flex;align-items: center;justify-content: space-between;">
              <span style="font-size: large;font-weight: bold;display: flex;align-items: center;">
                {{ item.grade_name }}-{{ item.course_name }}
                <el-tag effect="plain" type="warning" size="small" style="margin-left: 20px;">未提交</el-tag>
                <el-tag effect="plain" type="danger" size="small" style="margin-left: 20px;">已截止</el-tag>
              </span>
              <span style="color: #FDCB9E;font-size: 18px;">{{ item.total_points }}分</span>
            </div>

            <div style="display: flex;align-items: center;justify-content: space-between;">
              <el-popover placement="top-start" width="360" trigger="hover" :content="item.assignment_title">
                <span slot="reference" class="workname"
                  style="display: inline-block; width: 360px;overFlow: hidden;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;font-size: 16px;font-weight: bold;"
                  @click="assginmentDecs(item.assignment_id, item.student_assignment_id, item.course_id, 'published')">
                  {{ item.assignment_title }}
                </span>
              </el-popover>

              <!-- <div class="btn">
                <el-tooltip content="查看" placement="bottom" effect="light">
                  <el-button type="primary" size="small" icon="el-icon-view"
                    style="background-color: #FDCB9E;border: none;"
                    @click="lookWork(item.assi  gnment_id, item.student_assignment_id, 'unreviewed')"></el-button>
                </el-tooltip>
                <el-tooltip content="修改" placement="bottom" effect="light">
                  <el-button type="success" size="small" icon="el-icon-edit" @click="editAssignment(item)"></el-button>
                </el-tooltip>
              </div> -->
            </div>
          </el-card>

        </div>

        <el-pagination v-if="total > pageSize" background layout="prev, pager, next" :total="total" class="pagination"
          @current-change="handleCurrentChange" :current-page.sync="currentpage" :page-size="pageSize">
        </el-pagination>
      </div>

    </div>

  </div>
</template>

<script>
import UserAcatar from "@/components/UserAcatar.vue"; //引入组件
export default {
  name: "Submit",
  components: {
    UserAcatar,
  },
  data() {
    return {
      userInfo: {},
      activeIndex: "1",
      currentpage: 1,
      total: 1,
      pageNum: 1,
      pageSize: 5,
      echartList: [],
      workList: [], //渲染的任务列表
      submit_status: "",
      correction_status: "",
      options: [],
      coursename: "",
      // forcoursename:"",
      courseid: "",
      toworkstatus: "",
      userInfo: "",
      status: "unpublished",
      loading: false,
    };
  },
  methods: {
    // 判断作业是否截止
    isdeadline() {

    },
    // 将头像组件中的路由再传递给homeview
    change(msg) {
      this.$emit("transfer", msg);
    },
    // 判断截止时间是否过短, 根据时间获取来显示不同的tag标签
    isshorter(time) {
      let deadline = new Date(time);
      let timestamp = deadline.getTime() - Date.now();
      let hours = Math.floor(timestamp / (1000 * 60 * 60));
      console.log(hours);
      if (hours < 12) {
        return "danger";
      } else {
        return "success";
      }
    },
    // 跳转到作业详情
    async assginmentDecs(assignment_id, student_assignment_id, course_id, status) {
      // console.log(id);
      console.log(status);
      console.log(course_id);
      console.log(student_assignment_id);
      this.$router.push({ name: 'SubmitDetail', query: { assignment_id, student_assignment_id, course_id, status } })

    },
    // 写一个计算的距离截止时间还有多长时间的方法
    deadlineTime(time) {
      let deadline = new Date(time);
      let timestamp = deadline.getTime() - Date.now();
      let days = Math.floor(timestamp / 1000 / (60 * 60 * 24));
      let hours = Math.floor((timestamp / 1000 % (60 * 60 * 24)) / (60 * 60));
      let minutes = Math.floor((timestamp / 1000 % (60 * 60)) / 60);
      console.log(days, '天', hours, '小时', minutes, '分钟');
      if (days) {
        return `${days}天${hours}小时`
      } else if (hours) {
        return `${hours}小时${minutes}分钟`
      } else {
        return `${minutes}分钟`
      }
    },
    // toNew() {
    //   this.$router.push("/home/publishnew");
    // },
    // 获取作业列表
    async getAssignment() {
      console.log("此时执行了");
      this.loading = true;
      let obj = {};
      obj.course_id = this.courseid;
      obj.submit_status = this.submit_status;
      obj.correction_status = this.correction_status;
      obj.student_id = this.userInfo.student_id;
      obj.pageNum = this.pageNum;
      obj.pageSize = this.pageSize;
      let res = await this.$axios.post("/submitjob/getAssignmentList", obj);
      if (res.code == 200) {
        this.loading = false;
      }
      this.workList = res.list;
      console.log(this.workList);
      this.total = res.total;
    },
    // 这个是改变课程信息
    async groupNameChange(e) {
      await this.getAssignment();
    },
    // 取消选中课程信息
    async empty() {
      console.log(this.courseid);
      await this.getAssignment();
    },
    // 获取课程信息
    async getCourse() {
      let coursedata = await this.$axios.post("/submitjob/getCourse", {
        id: this.userInfo.student_id,
      });
      console.log(this.userInfo.student_id);

      console.log(coursedata);
      let courselist = coursedata.res.map((item) => {
        return {
          value: item.course_id,
          label: item.course_name,
        };
      });
      console.log(courselist);
      this.options = courselist;
    },
    // 改变状态（提交，未提交）
    async handleSelect(key, keyPath) {
      console.log(key);
      this.total = 0;
      // this.toworkstatus = e;
      if (key == "unpublished") {
        this.submit_status = "unpublish";
        this.correction_status = "false";
      } else if (key == "unreviewed") {
        this.submit_status = "published";
        this.correction_status = "false";
      } else if (key == "review") {
        this.submit_status = "published";
        this.correction_status = "true";
      } else if (key == 'unaccomplish') {
        this.submit_status = "unaccomplish";
        this.correction_status = 'false';
      }
      await this.getAssignment();
    },
    // 写作业
    goWork(item) {
      console.log(item);
      this.$router.push({
        path: "/home/submitwork",
        query: { workid: item.assignment_id, student_assignment_id: item.student_assignment_id },
      });
      // console.log(e);
    },
    // 点击查看作业
    lookWork(assignment_id, student_assignment_id, status) {
      console.log(student_assignment_id);
      this.$router.push({
        path: "/home/lookwork",
        query: { assignment_id, student_assignment_id, status }
      });
    },
    // 修改作业
    editAssignment(item) {
      this.$router.push({
        name: "SubmitWork",
        query: {
          handle: "edit",
          workid: item.assignment_id,
          student_assignment_id: item.student_assignment_id
        }
      });
    },
    // 改变页号
    async handleCurrentChange(val) {
      this.pageNum = val;
      console.log(val);
      this.getAssignment();
    },
  },
  async mounted() {
    this.userInfo = {
      ...JSON.parse(JSON.stringify(this.$store.state.user_info)),
    };
    console.log(this.$route.query);
    if (this.$route.query.nowStatus == "published") {
      this.status = "unreviewed";
      this.submit_status = "published";
    } else {
      this.submit_status = "unpublish";
    }
    this.correction_status = "false";
    await this.getAssignment();
    this.getCourse();
  },
};
</script>
<style scoped>
.menu {
  width: 400px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.mymenu {
  width: 400px;
  background-color: #ffffff;
}

.pagination {
  margin-top: 50px;
}

.workname {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  padding: 10px 0;
  font-family: "思源黑体";
  font-weight: bolder;
  cursor: pointer;
}

.header {
  width: 100%;
  height: 80px;
  border-bottom: 2px solid #bbb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mydiv {
  width: 90%;
  margin: 0px auto;

  /* border: 1px solid #bbb; */
  display: flex;
  flex-direction: column;
}
</style>